import { inject, onMounted } from "vue"
import { mapStore } from "@/stores/counter"
export const rotation = () => {
    const store = mapStore()
    let map
    onMounted(() => {
        map = inject('$map')
    })

    function rotate() {
        let center = map.getCenter()
        center.lng += 5
        map.easeTo({
            center,
            duration: 1000,
            easing: n => n
        })
    }

    const earth_rotate = () => {
        store.isRotate = !store.isRotate;

        if (store.isRotate) {
            // 开始旋转
            rotate();
            // 添加 moveend 事件监听器，确保每次移动结束后继续旋转
            map.on('moveend', rotate);
        } else {
            // 停止旋转
            // 移除 moveend 事件监听器
            map.off('moveend', rotate);
            // 取消当前的旋转动画
            map.easeTo({ cancel: true });
        }
    }
    return {
        earth_rotate
    }
}